<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>svg线性渐变演示</title>
		<style type="text/css">
			svg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				background-color: #555555;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<svg width="1200" height="600" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid meet">
				<defs>
					<linearGradient id="rainbow">
						<stop offset="14%" stop-opacity="1" stop-color="red" />
						<stop offset="28%" stop-opacity="1" stop-color="orange" />
						<stop offset="42%" stop-opacity="1" stop-color="yellow" />
						<stop offset="56%" stop-opacity="1" stop-color="green" />
						<stop offset="70%" stop-opacity="1" stop-color="aqua" />
						<stop offset="84%" stop-opacity="1" stop-color="blue" />
						<stop offset="100%" stop-color="purple" />
					</linearGradient>

					<linearGradient id="brush" x1="0%" y1="0%" x2="50%" y2="50%">
						<stop offset="0%" stop-opacity="1" stop-color="red" />
						<stop offset="100%" stop-opacity="1" stop-color="yellow" />
					</linearGradient>

					<linearGradient id="brush2" x1="0%" y1="0%" x2="100%" y2="100%">
						<stop offset="0%" stop-opacity="1" stop-color="red" />
						<stop offset="100%" stop-opacity="1" stop-color="yellow" />
					</linearGradient>

					<linearGradient id="blackwhite">
						<stop offset="0%" stop-opacity="1" stop-color="#000000" />
						<stop offset="50%" stop-opacity="1" stop-color="#ffffff" />
						<stop offset="100%" stop-opacity="1" stop-color="#000000" />
					</linearGradient>

					<linearGradient id="light" spreadMethod="pad" x1="40%" y1="45%" x2="70%" y2="55%">
						<stop offset="0%" stop-color="black" stop-opacity=".3" />
						<stop offset="25%" stop-color="black" stop-opacity=".5" />
						<stop offset="50%" stop-color="white" stop-opacity=".9" />
						<stop offset="75%" stop-color="black" stop-opacity=".5" />
						<stop offset="100%" stop-color="black" stop-opacity=".3" />
					</linearGradient>

					<radialGradient id="light2" cx="-1800%" cy="-480%" r="25%" spreadMethod="reflect">
						<stop offset="5%" stop-color="white" />
						<stop offset="25%" stop-color="black" stop-opacity=".3" />
						<stop offset="65%" stop-color="black" stop-opacity=".9" />
					</radialGradient>

					<!-- <radialGradient id="light2" spreadMethod="pad" cx="30%" cy="30%" r="200%">
						<stop offset="10%" stop-color="white" />
						<stop offset="95%" stop-color="black" stop-opacity=".3" />
					</radialGradient> -->

					<linearGradient id="gradient-specular" x1="10%" y1="30%" x2="80%" y2="60%" spreadMethod="pad">
						<stop offset="0%" stop-color="black" stop-opacity=".3" />
						<stop offset="43%" stop-color="black" stop-opacity=".5" />
						<stop offset="50%" stop-color="white" stop-opacity=".9" />
						<stop offset="57%" stop-color="black" stop-opacity=".5" />
						<stop offset="73%" stop-color="black" stop-opacity=".5" />
						<stop offset="80%" stop-color="white" stop-opacity=".9" />
						<stop offset="87%" stop-color="black" stop-opacity=".5" />
						<stop offset="100%" stop-color="black" stop-opacity=".3" />
					</linearGradient>

					<pattern id="p-light" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" x="0" y="0" width="1"
					 height="1">
						<!-- <animate attributeName="x" dur="40s" values="1600;0" keyTimes="0;1" repeatCount="indefinite" /> -->
						<animate attributeName="x" dur="2s" calcMode="linear" values="0;1" keyTimes="0;1" repeatCount="indefinite">
						</animate>
						<!-- <rect x="0" y="0" width="600" height="100" style="fill:url(#gradient-specular)"></rect> -->
						<rect x="0" y="0" width="600" height="100" style="fill:url(#light)"></rect>
					</pattern>

					<pattern id="p-light2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" x="0" y="0" width="1"
					 height="1">
						<animate attributeName="x" dur="2s" calcMode="linear" values="0;1" keyTimes="0;1" repeatCount="indefinite">
						</animate>
						<rect x="0" y="0" width="600" height="100" style="fill:url(#light2)"></rect>
					</pattern>

					<pattern id="p-rainbow" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" x="0" y="0" width="0.07"
					 height="1">
						<animate attributeName="x" dur="60s" from="0" to="1" repeatCount="indefinite" />
						<rect x="0" y="0" width="42" height="100" style="fill:url(#rainbow)"></rect>
					</pattern>

					<pattern id="p-brush" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" x="0" y="0" width="1"
					 height="1">
						<!-- <animate attributeName="x" dur="60s" from="0" to="1" repeatCount="indefinite" /> -->
						<rect x="0" y="0" width="600" height="100" style="fill:url(#brush)"></rect>
					</pattern>

					<pattern id="p-brush2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse" x="0" y="0" width="1"
					 height="1">
						<!-- <animate attributeName="x" dur="60s" from="0" to="1" repeatCount="indefinite" /> -->
						<rect x="0" y="0" width="600" height="100" style="fill:url(#brush2)"></rect>
					</pattern>

					<mask id="m-txt" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse">
						<text x="900" y="100" textLength="600" lengthAdjust="spacingAndGlyphs" style="font-family: verdana; font-size:100;fill:white;font-weight:600;text-anchor: middle;">SUPERZDD</text>
					</mask>

					<mask id="m-txt-2" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse">
						<text x="300" y="500" textLength="600" lengthAdjust="spacingAndGlyphs" style="font-family: verdana; font-size:100;fill:white;font-weight:600;text-anchor: middle;">SUPERZDD</text>
					</mask>

					<mask id="m-txt-3" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse">
						<text x="900" y="500" textLength="600" lengthAdjust="spacingAndGlyphs" style="font-family: verdana; font-size:100;fill:white;font-weight:600;text-anchor: middle;">SUPERZDD</text>
					</mask>
				</defs>

				<text x="0" y="15" style="fill:#ffffff;font-size:12;">x1,y1,x2,y2 相当于两点决定一条直线，注意它们的单位只支持百分比</text>
				<rect x="0" y="20" width="600" height="100" style="fill:url(#p-brush)" />

				<text x="0" y="145" textLength="600" style="fill:#ffffff;font-size:12;">x1y1x2y2同时决定了起点和终点的颜色，所以即使两条线斜率相同，但如果起止点不同，颜色也会不同</text>
				<text x="0" y="155" style="fill:#ffffff;font-size:12;">比如上下两图斜率相同，但上图终点是50,50,下图终点是100,100</text>
				<rect x="0" y="160" width="600" height="100" style="fill:url(#p-brush2)" />

				<text x="0" y="295" textLength="600" style="fill:#ffffff;">线性渐变在offset的点位上颜色会很明显，会造成类似于分割线的感觉，然后再往周围扩散</text>
				<rect x="0" y="300" width="600" height="100" style="fill:url(#blackwhite)" />

				<text x="600" y="15" style="fill:#ffffff;">用mask实现写字</text>
				<rect x="600" y="20" width="600" height="100" style="fill:white;mask:url(#m-txt);" />

				<text x="600" y="145" style="fill:#ffffff;">光线</text>
				<rect x="600" y="150" width="600" height="100" style="fill:url(#p-light);" />

				<text x="600" y="295" style="fill:#ffffff;">光线 径向渐变 随着半径越来越大，周长切片越来越直</text>
				<rect x="600" y="300" width="600" height="100" style="fill:url(#p-light2);" />

				<text x="0" y="420" style="fill:#ffffff;">最终效果</text>
				<rect x="0" y="425" width="600" height="100" style="fill:url(#p-rainbow);mask:url(#m-txt-2);" />
				<rect x="0" y="425" width="600" height="100" style="fill:url(#p-light);mask:url(#m-txt-2)" />

				<text x="600" y="420" style="fill:#ffffff;">最终效果2(径向渐变)</text>
				<rect x="600" y="425" width="600" height="100" style="fill:url(#p-rainbow);mask:url(#m-txt-3);" />
				<rect x="600" y="425" width="600" height="100" style="fill:url(#p-light2);mask:url(#m-txt-3)" />
			</svg>
		</div>
	</body>
</html>
